<template>
  <view>
    <view class="navbar no-perm" v-if="hasNoPermission">
      <view class="title">数据统计</view>
    </view>
    <view class="navbar" v-else>
      <view class="title">数据统计</view>
      <view class="searchs-box">
        <view class="search-item search-title-box">
          <uni-data-select ref="selectOneRef" :clear="false" v-model="queryParams.customerType"
            :localdata="customerDatas"></uni-data-select>
        </view>
        <view class="search-item tags">
          <view v-for="(item, index) in datelist" :key="index" @click="sectionChange(item)" class="tag-view"
            :class="{ active: item.value === queryParams.dateType }">
            {{ item.name }}
          </view>
        </view>
        <view @click="showPopClicks" class="search-item">
          <text>更多查询</text>
          <image src="@/static/images/common/more-fliter.png"
            style="width: 20px; height: 20px; position: relative; top: 8rpx" />
        </view>
      </view>
    </view>
    <view v-if="hasNoPermission" class="auth_mess">暂无权限</view>
    <view class="content" v-else>
      <view class="analysis-box" v-if="queryParams.customerType == '100'">
        <view class="items-box">
          <view class="vals">{{ totalMess.output }}</view>
          <view class="types">产量(吨)</view>
        </view>
        <view class="items-box">
          <view class="vals">{{ totalMess.saleVolumn }}</view>
          <view class="types">销量(吨)</view>
        </view>
        <view class="items-box">
          <view class="vals">{{ totalMess.saleTotalPrice }}</view>
          <view class="types">销售金额(元)</view>
        </view>
      </view>
      <view class="analysis-box" v-else>
        <view class="items-box">
          <view class="vals">{{ totalMess.purchVolumn }}</view>
          <view class="types">采购量(吨)</view>
        </view>

        <view class="items-box">
          <view class="vals">{{ totalMess.purchPrice }}</view>
          <view class="types">采购金额(元)</view>
        </view>
        <view class="items-box">
          <view class="vals">{{ totalMess.saleVolumn }}</view>
          <view class="types">销量(吨)</view>
        </view>

        <view class="items-box">
          <view class="vals">{{ totalMess.saleTotalPrice }}</view>
          <view class="types">销售金额(元)</view>
        </view>
      </view>
      <view class="lists-box">
        <u-list>
          <u-list-item v-for="(item, index) in datasList" :key="index">
            <view class="title-box">
              <view class="titles">{{ item.companyName }}</view>
              <view class="dates">{{ item.statisticsDate }}</view>
            </view>
            <view class="nums-box">
              <view class="item-box" v-if="queryParams.customerType == '100'">
                <view class="vals">{{ item.output }}</view>
                <view class="types">产量(吨)</view>
              </view>
              <view class="item-box" v-if="queryParams.customerType != '100'">
                <view class="vals">{{ item.purchaseVolume }}</view>
                <view class="types">采购量(吨)</view>
              </view>

              <view class="item-box" v-if="queryParams.customerType == '100'">
                <view class="vals">{{ item.inventory }}</view>
                <view class="types">库存(吨)</view>
              </view>

              <view class="item-box" v-if="queryParams.customerType != '100'">
                <view class="vals">{{ item.purchaseTotalPrice }}</view>
                <view class="types">采购金额(元)</view>
              </view>
              <view class="item-box">
                <view class="vals">{{ item.saleVolume }}</view>
                <view class="types">销量(吨)</view>
              </view>
              <view class="item-box">
                <view class="vals">{{ item.totalPrice }}</view>
                <view class="types">销售金额(元)</view>
              </view>
            </view>
          </u-list-item>
        </u-list>
        <u-loadmore :status="hasMore" style="padding-top:10rpx" loadmoreText="上拉加载更多" />
      </view>

    </view>
    <more-search ref="moreSearchRef" :customerType="queryParams.customerType" :show="popShow"
      :dateType="queryParams.dateType" @filterChange="sureClick" @closePop="popShow = false"></more-search>
    <u-back-top :scroll-top="scrollTop" :top="top" mode="square" :iconStyle="iconStyle"></u-back-top>
  </view>
</template>

<script>
  import config from "@/config";
  import { getAnalysisFun } from "@/api/analysis.js";
  import { queryDictData, listCoalInfo } from "@/api/statics.js";
  import { getLast30day, getDays, getDaysInMonth } from "@/utils/formatTime";
  import {
    getMennus
  } from "@/api/home";
  import constant from '@/utils/constant';
  import storage from '@/utils/storage';
  export default {
    data() {
      return {
        hasNoPermission: false,
        totalMess: {
          output: 0,
          saleVolumn: 0,
          saleTotalPrice: 0,
          purchVolumn: 0,
          purchPrice: 0,
        },
        loading: false,
        hasMore: 'loadmore',
        popShow: false,
        // 返回顶部组件参数
        scrollTop: 0,
        top: "600",
        iconStyle: {
          fontSize: "32rpx",
          color: "#2979ff",
        },
        datasList: [],
        queryParams: {
          beginTime: undefined,
          customerIds: undefined,
          customerType: "100",
          endTime: undefined,
          dateType: 1,
          pageNum: 1,
          pageSize: 10,
        },
        datelist: [
          { name: "日", value: 0 },
          { name: "月", value: 1 },
        ],
        customerDatas: [],
      };
    },
    onReachBottom() {
      if (this.hasMore == 'loadmore') {
        this.loadMore()
      }
    },
    onPageScroll(e) {
      this.scrollTop = e.scrollTop;
      uni.hideLoading()
    },
    onPullDownRefresh() {
      this.queryParams.pageNum = 1;
      this.datasList = [];
      this.getLists();
      uni.stopPullDownRefresh();
    },
    created() {
      this.getDictDatas();
    },
    onShow() {
      this.scrollTop = 0;
      this.popShow = false;
      const userInfo = storage.get(constant.SYS_CONSIGNOR)
      if (userInfo.sysUser?.userId != 1) {
        this.getMenus()
      }
    },
    watch: {
      "queryParams.customerType": {
        handler(newVal, oldVal) {
          this.queryParams.pageNum = 1;
          this.queryParams.customerIds = undefined
          this.datasList = [];
          this.$refs.moreSearchRef.resetForm(newVal);
          this.defaultDate("reset");
        },
      },
    },
    methods: {
      async getMenus() {
        let res = await getMennus()
        if (res.code == 200) {
          this.hasNoPermission = res.permissions.includes('app:system:statics') ? false : true
        }
      },
      sureClick(data) {
        this.queryParams.pageNum = 1;
        this.datasList = [];
        this.queryParams.beginTime = data.beginTime;
        this.queryParams.endTime = data.endTime;
        this.queryParams.customerIds = data.customerIds;
        this.getLists();
      },
      defaultDate(type = "1") {
        let sDate = undefined,
          eDate = undefined;
        if (this.queryParams.dateType == "0") {
          sDate = getLast30day(30);
          eDate = getDays();
        } else {
          let today = new Date();
          let tYear = today.getFullYear();
          let tMonth = today.getMonth() + 1;
          eDate =
            `${tYear}-${tMonth < 10 ? "0" + tMonth : tMonth}-` +
            getDaysInMonth(tYear, tMonth);
          sDate = `${tYear}-${tMonth < 10 ? "0" + tMonth : tMonth}-01`;
        }
        this.queryParams.beginTime = sDate;
        this.queryParams.endTime = eDate;
        if (type == "reset") {
          this.getLists();
        }
      },
      async loadMore() {
        if (this.hasMore == 'nomore') return;
        this.loading = true;
        this.queryParams.pageNum += 1;
        this.getLists();
      },
      showPopClicks() {
        this.popShow = true;
      },
      sectionChange(item) {
        this.queryParams.dateType = item.value;
        this.queryParams.pageNum = 1;
        this.datasList = [];
        this.defaultDate("reset");
      },
      async getDictDatas() {
        let that = this;
        let res = await queryDictData({ dictType: "customer_type" });
        if (res.code == 200) {
          that.customerDatas = []
          res.data.forEach((e) => {
            if (e.dictValue != 4) {
              that.customerDatas.push({
                value: e.dictValue,
                text: e.dictLabel,
              });
            }
          });
          this.defaultDate("reset");
        }
      },
      async getLists() {
        this.hasMore = "loading"
        console.log("AAAAAAAA调接口的入参=", this.queryParams)
        let res = await getAnalysisFun(this.queryParams);
        if (res.code == 200) {
          if (this.queryParams.customerType == "100") {
            this.totalMess.output = res.data.output || 0;
            this.totalMess.saleVolumn = res.data.saleVolume || 0;
            this.totalMess.saleTotalPrice = res.data.totalPrice || 0;
          } else {
            this.totalMess.purchVolumn = res.data.purchaseVolume || 0;
            this.totalMess.purchPrice = res.data.purchaseTotalPrice || 0;
            this.totalMess.saleVolumn = res.data.saleVolume || 0;
            this.totalMess.saleTotalPrice = res.data.totalPrice || 0;
          }

          this.$nextTick(() => { });
          if (res.data.companyStatisticsVos.length > 0) {
            this.datasList = [
              ...this.datasList,
              ...res.data.companyStatisticsVos,
            ];
            if (
              res.data.companyStatisticsVos.length < this.queryParams.pageSize
            ) {
              this.hasMore = "nomore";
            } else {
              this.hasMore = "loadmore";
            }
          } else {
            this.hasMore = "nomore";
          }
        }
      },

    },
  };
</script>

<style lang="less" scoped>
  .chart-pie {
    height: 90%;
  }

  .auth_mess {
    margin-top: 140rpx;
  }

  .content {
    padding: 240rpx 20rpx 20rpx 20rpx;

    .vals {
      font-size: 30rpx;
      color: #333;
    }

    .types {
      font-size: 24rpx;
      color: #999;
    }

    .titles {
      font-size: 32rpx;
      color: #000;
      font-weight: bold;
    }

    .dates {
      font-size: 28rpx;
      color: #999;
    }

    .analysis-box {
      background-color: #d22c2c;
      padding: 20rpx;
      display: flex;
      align-items: center;
      justify-content: space-around;
      color: #fff;
      border-radius: 16rpx;
      text-align: center;
      height: 132rpx;

      .items-box:not(:last-child) {
        border-right: 2rpx solid #e09898;
        padding-right: 30rpx;
      }

      .vals {
        color: #fff;
        font-weight: bold;
      }

      .types {
        color: #fff;
      }
    }

    .lists-box {
      background-color: #fff;
      border-radius: 16rpx;
      padding: 0 20rpx 30rpx 20rpx;
      margin-top: 20rpx;

      .u-list {
        /* min-height: 200rpx !important; */
        /* height: auto !important; */

        .u-list-item:not(.last-one) {
          border-bottom: 2rpx solid #f1f1f1;
        }

        .u-list-item.last-one {
          padding: 0 !important;
        }

        .u-list-item {
          padding: 30rpx 0;

          .title-box {
            display: flex;
            align-items: center;
            justify-content: space-between;
          }

          .nums-box {
            display: flex;
            align-items: center;
            justify-content: space-around;
            text-align: center;
            margin-top: 30rpx;

            .item-box:not(:last-child) {
              border-right: 2rpx solid #f1f1f1;
              padding-right: 30rpx;
            }
          }
        }
      }
    }
  }

  .page-detail {
    .navbar {
      .title {
        font-size: 36rpx;
        font-weight: 500;
        color: #ffffff;
        text-align: center;
        height: 90rpx;
        line-height: 90rpx;
        padding-top: 86rpx;
      }
    }

    .navbar.no-perm {
      .title {
        padding-top: 6rpx;
      }
    }

    .top-box {
      display: flex;
      justify-content: space-around;
      margin-top: 176rpx;
      padding-top: 20rpx;

      .chart-box {
        width: 339rpx;
        height: 420rpx;
        background: #fff;
        position: relative;
        padding-bottom: 20rpx;
        border-radius: 16rpx 16rpx 16rpx 16rpx;

        .title {
          font-size: 27rpx;
          font-weight: 400;
          color: #999999;
          padding-top: 20rpx;
          text-align: center;
        }

        .chart-title {
          position: absolute;
          left: 50%;
          top: 56%;
          transform: translate(-50%, -50%);
          text-align: center;

          .center-label {
            .title {
              font-size: 26rpx;
              color: #666666;
              margin-bottom: 10rpx;
            }

            .value-1 {
              display: initial;
              padding: 0 50rpx;
              margin-top: 10rpx;
              width: auto;
              height: 40rpx;
              border-radius: 50rpx 50rpx 50rpx 50rpx;
              opacity: 1;
              border: 1px solid #536fc8;
              font-size: 30rpx;
              color: #536fc8;
            }

            .value-2 {
              display: initial;
              padding: 0 50rpx;
              width: auto;
              height: 64rpx;
              border-radius: 50rpx 50rpx 50rpx 50rpx;
              opacity: 1;
              border: 1px solid #f5c756;
              font-size: 30rpx;
              color: #f5c756;
            }

            .value-0 {
              display: initial;
              padding: 0 50rpx;
              width: auto;
              height: 40rpx;
              border-radius: 50rpx 50rpx 50rpx 50rpx;
              opacity: 1;
              border: 1px solid #96c96f;
              font-size: 30rpx;
              color: #96c96f;
            }
          }

          .top-20 {
            margin-top: 40rpx;
          }
        }
      }
    }

    .column-chart {
      background: #ffffff;
      margin: 20rpx;

      .title {
        font-size: 27rpx;
        font-weight: 400;
        color: #999999;
        padding-top: 20rpx;
        text-align: center;
      }
    }

    .bottom-box {
      display: flex;
      justify-content: space-around;
      margin: 0 20rpx;
      margin-bottom: 20rpx;

      .chart-box {
        width: 49%;
        height: 500rpx;
        background: #fff;
        position: relative;
        padding-bottom: 20rpx;
        border-radius: 16rpx 16rpx 16rpx 16rpx;

        .title {
          font-size: 27rpx;
          font-weight: 400;
          color: #999999;
          padding-top: 20rpx;
          text-align: center;
        }

        .chart-title {
          position: absolute;
          left: 50%;
          top: 56%;
          transform: translate(-50%, -50%);
          text-align: center;

          .center-label {
            .title {
              font-size: 26rpx;
              color: #666666;
              margin-bottom: 10rpx;
            }

            .value-1 {
              display: initial;
              padding: 0 50rpx;
              margin-top: 10rpx;
              width: auto;
              height: 40rpx;
              border-radius: 50rpx 50rpx 50rpx 50rpx;
              opacity: 1;
              border: 1px solid #536fc8;
              font-size: 30rpx;
              color: #536fc8;
            }

            .value-2 {
              display: initial;
              padding: 0 50rpx;
              width: auto;
              height: 64rpx;
              border-radius: 50rpx 50rpx 50rpx 50rpx;
              opacity: 1;
              border: 1px solid #f5c756;
              font-size: 30rpx;
              color: #f5c756;
            }

            .value-0 {
              display: initial;
              padding: 0 50rpx;
              width: auto;
              height: 40rpx;
              border-radius: 50rpx 50rpx 50rpx 50rpx;
              opacity: 1;
              border: 1px solid #96c96f;
              font-size: 30rpx;
              color: #96c96f;
            }
          }

          .top-20 {
            margin-top: 40rpx;
          }
        }
      }
    }
  }
</style>